<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 中的表单元素操作</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 0 女， 1 男 单选框 -->  
        <input type="radio" value="0" v-model="sex"> 女
        <input type="radio" value="1" v-model="sex"> 男
        <!-- 复选框，赋值用的是数组 -->
        <div>
            <p>爱好：</p>
            <input type="checkbox" value="游戏" v-model="love"> 游戏
            <input type="checkbox" value="电影" v-model="love"> 电影
            <input type="checkbox" value="游泳" v-model="love"> 游泳
            <input type="checkbox" value="夏天" v-model="love"> 夏天
        </div>
        <!-- 下拉框 -->
        <div>
            <p>名人</p>
            <select name="" id="" v-model="star" multiple>
                <option value="0">齐白石</option>
                <option value="1">董明珠</option>
                <option value="2">鲁豫</option>
                <option value="3">JACK MA</option>
                <option value="4">尼克</option>
            </select>
        </div>
        <input v-model.number="age" type="text">

    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            sex:1,
            love:['电影','夏天'],
            star:['3','2'],
            age:'121'
        }
    })
</script>
</html>